<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>中国地图</title>
    <link rel="stylesheet" href="./css/base.css" />
  </head>

  <body>
    <section class="map-box">
      <div id="map-box" style="width: 1440px; height: 916px"></div>
    </section>
    <nav class="nav-box">
      <a href="/Echarts-Map-Icon/index.html">中国</a>
      <a href="/Echarts-Map-Icon/province.html">省份</a>
      <a href="/Echarts-Map-Icon/city.html">城市</a>
      <a href="/Echarts-Map-Icon/county.html">区县</a>
    </nav>

    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.min1.js"></script>
    <script src="./js/china-data.js"></script>
    <script>
      //自动切换定时器， 自动切换项
      let timer = null,
        nows = -1;

      //初始Echarts实例对象
      const oMap = echarts.init(document.querySelector("#map-box"));

      // echarts.registerMap('wuhan', require('../map/wuhan.json'));
      oMap.setOption({
        title: {
          text: "中国 地理图形",
          left: "center",
          textStyle: {
            color: "white",
            fontStyle: "normal",
            fontWeight: "bold",
            fontSize: 36,
            lineHeight: 86,
            textBorderColor: "green",
            textBorderWidth: 1,
            textShadowColor: "white",
            textShadowBlur: 20,
            textShadowOffsetX: 2,
            textShadowOffsetY: 2,
          },
        },

        // 提示框组件(可以设置在多种地方)
        tooltip: {
          show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
          trigger: "item", //触发类型。item,axis,none
          enterable: true, //鼠标是否可进入提示框浮层中，默认为false，
          showContent: true, //是否显示提示框浮层
          triggerOn: "mousemove", //提示框触发的条件(mousemove|click|none)
          showDelay: 200, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
          textStyle: {
            color: "white",
            fontSize: 12,
          },
          padding: [0, 8],
          hideDelay: 10, //浮层隐藏的延迟
          // formatter: (o) => (o.data) ? `<div class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}</h3></div><i></i></section>` : '',
          formatter: (o) => {
            const userData = [
              { name: "江西省", num: 35 },
              { name: "贵州省", num: 36 },
            ];
            for (let i = 0; i < userData.length; i++) {
              return userData[i].name == o.name
                ? `<div class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}，用户数：${userData[i].num}</h3></div><i></i></section>`
                : `<div class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}</h3></div><i></i></section>`;
            }
          },
          backgroundColor: "#00a2e3", //提示框浮层的背景颜色。
          alwaysShowContent: true,
          transitionDuration: 1, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
        },

        //地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
        geo: {
          show: true,
          map: "china",
          roam: false,
          // top: '10%',
          left: "center",
          zoom: 1.02,
          aspectScale: 0.9,
          itemStyle: {
            normal: {
              opacity: 1, //图形透明度 0 - 1
              borderColor: "#0e3c6d", //图形的描边颜色
              borderWidth: 2, //描边线宽。为 0 时无描边。
              borderType: "solid", //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
              areaColor: "rgba(11, 28, 63, 0.8)", //图形的颜色 #eee
              areaColor: "#0063cc", //图形的颜色 #eee
            },
          },
        },

        //系列列表。每个系列通过 type(map, scatter, bar, line, gauge, tree.....) 决定自己的图表类型
        series: [{
            map: "china",
            type: "map",
            zoom: 1, //当前视角的缩放比例。
            aspectScale: 0.9, //这个参数用于 scale 地图的长宽比。geoBoundingRect.width / geoBoundingRect.height * aspectScale
            roam: false, //是否开启鼠标缩放和平移漫游。默认不开启
            label: {
              show: false,
              textStyle: {
                color: "white",
                fontSize: 12,
                backgroundColor: "", //文字背景色
              },
            },

            itemStyle: {
              normal: {
                borderColor: "#4b93da", //图形的描边颜色
                borderWidth: 2, //描边线宽。为 0 时无描边。
                borderType: "solid", //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                areaColor: "rgba(11, 28, 63, 0.8)", //图形的颜色 #eee
                shadowBlur: 100, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                shadowColor: "#133988", //阴影色
                shadowOffsetX: 20, //X轴阴影
                shadowOffsetY: -20, //Y轴阴影
                label: {
                  show: true,
                  textStyle: {
                    fontWeight: "bold",
                    color: "white",
                    fontSize: 14,
                  },
                },
              },
              //鼠标移入时
              emphasis: {
                borderColor: "#005b89",
                borderWidth: "1",
                areaColor: "#17beed",
                label: {
                  show: false,
                  textStyle: {
                    color: "yellow",
                    fontSize: 14,
                  },
                },
              },

              effect: {
                show: true,
                shadowBlur: 10,
                loop: true,
              },
            },

            //自定义图片数组对象[{}, {}...]
          },
          ...chinaData.map((item, index) => {
            return {
              type: "scatter",
              coordinateSystem: "geo",
              //自定义图片的 位置（lng, lat）
              data: [{ name: item.name, value: [item.lng, item.lat] }],
              //自定义图片的 大小
              symbolSize: [80, 60],
              //自定义图片的 路径(注：必须以image://开头)
              symbol: `image://img/icon/icon (${index}).png`,
            };
          }),
        ],
      });

      //自动切换
      const autoShow = (length) => {
        nows = (nows + 1) % length;
        oMap.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: nows,
        });
      };

      //每隔5秒钟自动切换到下一个数据点
      autoShow(chinaData.length);
      clearInterval(timer);
      timer = window.setInterval(() => {
        autoShow(chinaData.length);
      }, 5000);

      // 点击事件
      oMap.on("click", function (res) {
        console.log(res);
        if ("scatter" === res.componentSubType) {
          alert(`点击了 ${res.name} 图标`);
        }
        if ("map" === res.componentSubType) {
          alert(`点击了 ${res.name} 地图`);
        }
      });

      // 自适应屏幕
      // window.addEventListener("resize",function(){
      //     console.log(oMap)
      //     oMap.resize();
      // });
    </script>
  </body>
</html>
